<template>
  <div>
    <el-carousel type="card" height="240px">
      <el-carousel-item v-for="item in linkList" :key="item.linkId">
        <h3 text="2xl" justify="center">
          <el-link @click="open(item.linkUrl)">
            <el-image :src="item.linkImage" style="width: 620px; height: 240px" />
          </el-link>
        </h3>
      </el-carousel-item>
    </el-carousel>
  </div>

  <!--  公告-->
  <el-divider><span style="font-size: 23px; font-family: '楷体'">公告</span></el-divider>
  <!--  搜索表单-->
  <el-form :inline="true" :model="searchNotice.noticeTitle">
    <el-form-item label="公告标题">
      <el-input
        v-model="searchNotice.noticeTitle"
        type="text"
        autocomplete="off"
        style="width: 180px"
        placeholder="输入搜索标题"
      />
    </el-form-item>
    <el-form-item label="公告类型">
      <el-select
        v-model="searchNotice.noticeType"
        placeholder="选择公告类型"
        clearable
        style="width: 180px"
      >
        <el-option
          v-for="item in noticeTypeList"
          :key="item.value"
          :label="item.value"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">搜索</el-button>
      <el-button type="info" @click="resetForm">清空</el-button>
    </el-form-item>
  </el-form>

  <!--  公告列表-->
  <el-table
    ref="singleTableRef"
    :data="noticeInfo"
    highlight-current-row
    height="260px"
    @current-change="handleCurrentChange"
  >
    <el-table-column type="index" label="序号" width="110" align="center" />
    <el-table-column property="noticeTitle" label="公告标题" align="center" />
    <el-table-column property="noticeType" label="公告类型" width="180" align="center" />
    <el-table-column property="createTime" label="发布日期" align="center" />
  </el-table>

  <!--  点击对应公告时的对话框-->
  <el-dialog v-model="dialogVisible" :title="notice.noticeTitle" center align-center width="50%">
    <p style="text-indent: 2em">{{ notice.noticeContent }}</p>
    <div v-if="notice.noticeFileName != '' && notice.noticeFileName != null">
      <br /><br /><br />
      <p>相关文件：</p>
      <el-link
        :href="notice.noticeFileUrl"
        :underline="false"
        target="_blank"
        :download="notice.noticeFileName"
      >
        <el-icon><Document /></el-icon>{{ notice.noticeFileName }}
      </el-link>
    </div>
    <template #footer>
      <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
    </template>
  </el-dialog>

  <!--  分页-->
  <div style="margin-top: 10px">
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[5, 10, 15, 20]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      background
      small
      @size-change="SizeChange"
      @current-change="CurrentChange"
    />
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { ElMessage, ElTable } from 'element-plus'
import { getAllNotice, getNoticeInfo } from '@/apis/notice'
import { getLinkInfo } from '@/apis/link'
import { userStore } from '@/stores/user'

const userstore = userStore()
// 用于搜索和分页
const searchNotice = ref({
  noticeTitle: '',
  noticeType: ''
})
const pageSize = ref(5)
const currentPage = ref(1)
const total = ref(30)
const noticeTypeList = ref([{ value: '' }])
const dialogVisible = ref(false)
const linkList = ref([
  {
    linkId: 1,
    linkImage: 'public/image/计算机等级考试.jpg',
    linkUrl: 'https://ncre.neea.edu.cn/'
  }
])

interface Notice {
  noticeId: number
  noticeTitle: string
  noticeContent: string
  noticeType: string
  noticeFileName: string
  noticeFileUrl: string
  createTime: String
}

const singleTableRef = ref<InstanceType<typeof ElTable>>()
const noticeInfo = ref<Notice[]>([
  {
    noticeId: 1,
    noticeTitle: '测试公告1',
    noticeContent: '测试1',
    noticeType: '',
    noticeFileName: 'element-plus-logo.svg',
    noticeFileUrl: 'https://element-plus.org/images/element-plus-logo.svg',
    createTime: '2023-11-23 17:32:15'
  }
])

const notice = ref<Notice>({})

const page = () => {
  getNoticeInfo(
    searchNotice.value.noticeTitle,
    searchNotice.value.noticeType,
    '使用中',
    pageSize.value,
    currentPage.value
  ).then((res) => {
    console.log('获取公告信息')
    if (res.data.code === 1) {
      console.log('获取成功')
      noticeInfo.value = res.data.data.rows
      total.value = res.data.data.total
    } else {
      ElMessage({ type: 'error', message: res.data.msg })
      console.log('获取失败')
    }
  })
}
const getLinkList = () => {
  getLinkInfo('').then((res) => {
    if (res.data.code === 1) {
      linkList.value = res.data.data
    } else {
      ElMessage.error(res.data.msg)
    }
  })
}
onMounted(() => {
  getLinkList()
  getAllNotice('使用中').then((res) => {
    if (res.data.code === 1) {
      let type = ref(new Set())
      for (let i = 0; i < res.data.data.length; i++) {
        type.value.add(res.data.data[i].noticeType)
      }
      let i = 0
      for (let v of type.value.values()) {
        noticeTypeList.value[i] = { value: v }
        i++
      }
    } else {
      ElMessage({ type: 'error', message: res.data.msg })
      console.log('获取失败')
    }
  })
  page()
  userstore.defaultUrl = '/index'
})

// 新窗口打开链接
const open = (url: string) => {
  window.open(url)
}

const handleCurrentChange = (val: Notice | undefined) => {
  singleTableRef.value!.setCurrentRow(null)
  notice.value = val
  dialogVisible.value = true
}

const submitForm = () => {
  currentPage.value = 1
  page()
}
const resetForm = () => {
  searchNotice.value = {
    noticeTitle: '',
    noticeType: ''
  }
  page()
}
const SizeChange = (val: number) => {
  pageSize.value = val
  page()
}
const CurrentChange = (val: number) => {
  currentPage.value = val
  page()
}
</script>
<style scoped>
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
